<template>
  <el-form-item
    v-if="showStatus"
    :label-width="isLabel === false || !widget.options.labelWidthStatus
      ? '0px'
      : widgetLabelWidth + 'px'
    "
    :label="isLabel === false ||
      widget.type === 'divider' ||
      !widget.options.labelWidthStatus
      ? ''
      : widget.name
    "
    :prop="propValue"
    :style="subformIndex !== undefined || widget.type === 'link' || widget.type === 'divider'
      ? { 'margin-bottom': '0' }
      : {}
    "
  >
    <!-- <template v-if="preview">
      <template v-if="widget.type === 'color'">
        <div
          style="width: 32px; height: 20px; margin-top: 6px; border-radius: 3px"
          :style="{ 'background-color': dataModel }"
        />
      </template>
<template v-else-if="widget.type === 'switch'">
        <el-switch v-model="dataModel" :disabled="true" />
      </template>
<template v-else-if="widget.type === 'editor'">
        <div class="previewEditorDiv" v-html="dataModel" />
      </template>

<template v-else-if="widget.type === 'file'">
        <div
          v-for="(uploadUrlItem, uploadUrlIndex) of dataModel"
          :key="uploadUrlIndex"
        >
          <i style="color: #909399;" class="el-icon-document" />
          <a
            :href="
              'http://127.0.0.1:8012/onlinePreview?url=' +
                encodeURIComponent(Base64.encode(uploadUrlItem.url))
            "
            target="_blank"
            >{{ uploadUrlItem.name }}</a
          >
        </div>
      </template>

<template v-else-if="widget.type === 'imgupload'">
        <fm-upload
          v-model="dataModel"
          :style="{ width: widget.options.width }"
          :width="widget.options.size.width"
          :height="widget.options.size.height"
          :preview="preview"
        />
      </template>
<template v-else-if="widget.type === 'rate'">
        <el-rate
          v-model="dataModel"
          :max="widget.options.max"
          :disabled="true"
          :allow-half="widget.options.allowHalf"
        />
      </template>
<template v-else-if="widget.type === 'divider'">
        <el-divider
          :direction="widget.options.direction"
          :content-position="widget.options.content_position"
        >
          <span
            :style="{
              'font-size': widget.options.font_size,
              'font-family': widget.options.font_family,
              'font-weight': widget.options.font_weight,
              color: widget.options.font_color
            }"
          >
            {{ widget.options.defaultValue }}
          </span>
        </el-divider>
      </template>
<template v-else-if="widget.type === 'input' && widget.options.showPassword">
        <input
          :value="dataModel"
          type="password"
          style="border: none; background-color: #ffffff; color: #303133"
          disabled="disabled"
        />
      </template>
<template v-else-if="widget.type === 'cascader'">
        <el-cascader
          v-model="dataModel"
          class="preview-cascader-class"
          :disabled="true"
          :show-all-levels="widget.options.showAllLevels"
          :options="
            widget.options.remote
              ? widget.options.remoteOptions
              : widget.options.options
          "
          :props="widget.options.props"
        />
      </template>
<template v-else>
        <div>
          {{ dataModel }}
        </div>
      </template>
</template> -->
    <template>
      <template v-if="widget.type === 'input' && widget.model != 'sjsx_patient_ward'">
        <el-input
          v-if="widget.options.dataType === 'number' ||
            widget.options.dataType === 'integer' ||
            widget.options.dataType === 'float'
          "
          v-model.number="dataModel"
          :type="widget.options.dataType"
          :placeholder="widget.options.placeholder"
          :style="{ width: widget.options.width }"
          :disabled="widget.options.disabled || preview"
          :show-password="widget.options.showPassword"
        >
          <i v-if="widget.options.unit" slot="suffix" style="font-style:normal;color:#111">{{ widget.options.unit }}</i>
        </el-input>
        <el-input
          v-else
          v-model="dataModel"
          :type="widget.options.dataType"
          :disabled="widget.options.disabled || preview"
          :placeholder="widget.options.placeholder"
          :style="{ width: widget.options.width }"
          :show-password="widget.options.showPassword"
        >
          <i v-if="widget.options.unit" slot="suffix" style="font-style:normal;color:#111">{{ widget.options.unit }}</i>
        </el-input>
      </template>

      <template v-if="widget.type === 'input' && widget.model == 'sjsx_patient_ward'">
        <el-select
          v-model="dataModel"
          :disabled="widget.options.disabled || preview"
          :clearable="true"
          placeholder="请选择病区"
          :style="{ width: widget.options.width }"
          :filterable="true"
        >
          <el-option v-for="(item, index) in bqOptions" :key="index" :value="item.value" :label="item.label" />
        </el-select>
      </template>

      <template v-if="widget.type === 'textarea'">
        <el-input
          v-if="widget.options.textLength"
          v-model="dataModel"
          type="textarea"
          :rows="3"
          :disabled="preview"
          show-word-limit
          :maxlength="widget.options.textLength"
          :placeholder="widget.options.placeholder"
          :style="{ width: widget.options.width }"
        />
        <el-input
          v-else
          v-model="dataModel"
          type="textarea"
          :rows="5"
          :disabled="preview"
          :placeholder="widget.options.placeholder"
          :style="{ width: widget.options.width }"
        />
      </template>

      <template v-if="widget.type === 'number'">
        <el-input-number
          v-model="dataModel"
          :style="{ width: widget.options.width }"
          :step="widget.options.step"
          controls-position="right"
          :disabled="widget.options.disabled || preview"
        />
      </template>

      <template v-if="widget.type === 'radio'">
        <el-radio-group
          v-model="dataModel"
          :style="{ width: widget.options.width }"
          :disabled="widget.options.disabled || preview"
        >
          <el-radio
            v-for="(item, index) in widget.options.remote
              ? widget.options.remoteOptions
              : widget.options.options"
            :key="index"
            class="incat-radio incat-mini"
            :style="{
              display: widget.options.inline ? 'inline-block' : 'block'
            }"
            :label="item.value"
          >
            <template v-if="widget.options.remote">{{ item.label }}</template>
            <template v-else>{{
              widget.options.showLabel ? item.label : item.value
            }}</template>
          </el-radio>
        </el-radio-group>
      </template>

      <template v-if="widget.type === 'radioOther'">
        <el-radio-group
          v-model="dataModel"
          :style="{ width: widget.options.width }"
          :disabled="widget.options.disabled || preview"
        >
          <el-radio
            v-for="(item, index) in widget.options.remote
              ? widget.options.remoteOptions
              : widget.options.options"
            :key="index"
            class="incat-radio incat-mini"
            :style="{
              display: widget.options.inline ? 'inline-block' : 'block'
            }"
            :label="item.value"
          >
            <template v-if="widget.options.remote">{{ item.label }}</template>
            <template v-else>{{
              widget.options.showLabel ? item.label : item.value
            }}</template>
          </el-radio>
          <el-radio
            key="other"
            class="incat-radio-other incat-mini"
            :style="{
              display: widget.options.inline ? 'inline-block' : 'block'
            }"
            label="其他"
          >
            其他
            <el-input
              v-if="dataModel.indexOf('其他') != -1"
              v-model="otherModel"
              style="display: inline-block;width: 200px;"
              @change="radioOtherInputChange"
            />
          </el-radio>
        </el-radio-group>
      </template>

      <template v-if="widget.type === 'checkbox'">
        <el-checkbox-group
          v-model="dataModel"
          :style="{ width: widget.options.width }"
          :disabled="widget.options.disabled || preview || disabledStatus"
        >
          <el-checkbox
            v-for="(item, index) in widget.options.remote
              ? widget.options.remoteOptions
              : widget.options.options"
            :key="index"
            :style="{
              display: widget.options.inline ? 'inline-block' : 'block'
            }"
            :label="item.value"
          >
            <template v-if="widget.options.remote">{{ item.label }}</template>
            <template v-else>{{
              widget.options.showLabel ? item.label : item.value
            }}</template>
          </el-checkbox>
        </el-checkbox-group>
      </template>

      <template v-if="widget.type === 'checkboxOther'">
        <el-checkbox-group
          v-model="dataModel"
          :style="{ width: widget.options.width }"
          :disabled="widget.options.disabled || preview || disabledStatus"
        >
          <el-checkbox
            v-for="(item, index) in widget.options.remote
              ? widget.options.remoteOptions
              : widget.options.options"
            :key="index"
            :style="{
              display: widget.options.inline ? 'inline-block' : 'block'
            }"
            :label="item.value"
          >
            <template v-if="widget.options.remote">{{ item.label }}</template>
            <template v-else>{{
              widget.options.showLabel ? item.label : item.value
            }}</template>
          </el-checkbox>
          <el-checkbox
            key="other"
            :style="{
              display: widget.options.inline ? 'inline-block' : 'block'
            }"
            label="其他"
          >
            其他
            <el-input
              v-if="dataModel.indexOf('其他') != -1"
              v-model="otherModel"
              style="display: inline-block;width: 250px;"
              @change="checkBoxOtherInputChange"
            />
          </el-checkbox>
        </el-checkbox-group>
      </template>

      <template v-if="widget.type === 'time'">
        <el-time-picker
          v-model="dataModel"
          :is-range="widget.options.isRange"
          :placeholder="widget.options.placeholder"
          :start-placeholder="widget.options.startPlaceholder"
          :end-placeholder="widget.options.endPlaceholder"
          :readonly="widget.options.readonly"
          :disabled="widget.options.disabled || preview"
          :editable="widget.options.editable"
          :clearable="widget.options.clearable"
          :arrow-control="widget.options.arrowControl"
          :value-format="widget.options.format"
          :style="{ width: widget.options.width }"
        />
      </template>

      <template v-if="widget.type === 'date'">
        <el-date-picker
          v-model="dataModel"
          :type="widget.options.type"
          :placeholder="widget.options.placeholder"
          :start-placeholder="widget.options.startPlaceholder"
          :end-placeholder="widget.options.endPlaceholder"
          :readonly="widget.options.readonly"
          :disabled="widget.options.disabled || preview"
          :editable="widget.options.editable"
          :clearable="widget.options.clearable"
          :value-format="widget.options.timestamp ? 'timestamp' : widget.options.format
          "
          :format="widget.options.format"
          :style="{ width: widget.options.width }"
        />
      </template>

      <template v-if="widget.type === 'rate'">
        <el-rate
          v-model="dataModel"
          :max="widget.options.max"
          :disabled="widget.options.disabled || preview"
          :allow-half="widget.options.allowHalf"
        />
      </template>

      <template v-if="widget.type === 'color'">
        <el-color-picker
          v-model="dataModel"
          :disabled="widget.options.disabled || preview"
          :show-alpha="widget.options.showAlpha"
        />
      </template>

      <template v-if="widget.type === 'select'">
        <el-select
          v-model="dataModel"
          :disabled="widget.options.disabled || preview"
          :multiple="widget.options.multiple"
          :clearable="widget.options.clearable"
          :placeholder="widget.options.placeholder"
          :style="{ width: widget.options.width }"
          :filterable="widget.options.filterable"
        >
          <el-option
            v-for="(item, index) in widget.options.remote
              ? widget.options.remoteOptions
              : widget.options.options"
            :key="index"
            :value="item.value"
            :label="widget.options.showLabel || widget.options.remote
              ? item.label
              : item.value
            "
          />
        </el-select>
      </template>

      <template v-if="widget.type === 'switch'">
        <el-switch v-model="dataModel" :disabled="widget.options.disabled || preview" />
      </template>

      <template v-if="widget.type === 'slider'">
        <el-slider
          v-model="dataModel"
          :min="widget.options.min"
          :max="widget.options.max"
          :disabled="widget.options.disabled || preview"
          :step="widget.options.step"
          :show-input="widget.options.showInput"
          :range="widget.options.range"
          :style="{ width: widget.options.width }"
        />
      </template>

      <template v-if="widget.type === 'imgupload'">
        <fm-upload
          v-model="dataModel"
          :disabled="widget.options.disabled || preview"
          :style="{ width: widget.options.width }"
          :width="widget.options.size.width"
          :height="widget.options.size.height"
          :token="widget.options.token"
          :domain="widget.options.domain"
          :multiple="widget.options.multiple"
          :length="widget.options.length"
          :is-qiniu="widget.options.isQiniu"
          :is-delete="widget.options.isDelete"
          :min="widget.options.min"
          :is-edit="widget.options.isEdit"
          :action="widget.options.action"
        />
      </template>

      <template v-if="widget.type === 'file'">
        <FileUpload :element="widget" :data-model="dataModel" :preview="preview" @fileList="fileList" />
      </template>

      <template v-if="widget.type === 'editor'">
        <vue-editor
          v-model="dataModel"
          :disabled="widget.options.disabled || preview"
          :style="{ width: widget.options.width }"
        />
      </template>

      <template v-if="widget.type === 'cascader'">
        <el-cascader
          v-model="dataModel"
          :disabled="widget.options.disabled || preview"
          :show-all-levels="widget.options.showAllLevels"
          :clearable="widget.options.clearable"
          :placeholder="widget.options.placeholder"
          :style="{ width: widget.options.width }"
          :options="widget.options.remote
            ? widget.options.remoteOptions
            : widget.options.options
          "
          :props="widget.options.props"
        />
      </template>

      <template v-if="widget.type === 'text'">
        <span v-if="widget.options.isRequire" style="color:#e34a44;font-size:14px">*</span>
        <span
          :style="{
            'font-size': widget.options.font_size,
            'font-family': widget.options.font_family,
            'font-weight': widget.options.font_weight,
            color: widget.options.font_color
          }"
        >
          {{ widget.options.defaultValue }}
        </span>
      </template>
      <template v-if="widget.type === 'link'">
        <el-link
          id="no-print"
          type="primary"
          :underline="false"
          @click="
            downLoadDoc(widget.options.defaultValue, widget.options.linkValue)
          "
        >{{ widget.options.defaultValue }}</el-link>
      </template>

      <template v-if="widget.type === 'divider'">
        <el-divider :direction="widget.options.direction" :content-position="widget.options.content_position">
          <span
            :style="{
              'font-size': widget.options.font_size,
              'font-family': widget.options.font_family,
              'font-weight': widget.options.font_weight,
              color: widget.options.font_color
            }"
          >
            {{ widget.options.defaultValue }}
          </span>
        </el-divider>
      </template>
      <template v-if="widget.type === 'header'">
        <div class="header clearfix flex flex-row align-center">
          <div class="line" />
          <span class="font18 ml10 flex-auto">{{ widget.options.defaultValue }}</span>

        </div>
      </template>
      <template v-if="widget.type === 'priceno'">
        <div class="flex flex-row">
          <el-input
            v-model="dataModel"
            type="string"
            placeholder="请输入收费编码"
            :disabled="widget.options.disabled || preview"
            class="pr30"
            @input="priceNoChange"
          />
          <el-button
            v-if="!preview"
            type="primary"
            icon="el-icon-search"
            size="small"
            @click="handleSearchPrice"
          >查询</el-button>
        </div>
      </template>
      <template v-if="widget.type === 'pricetable'">
        <div class="flex flex-row">
          <el-table ref="priceTable" border tooltip-effect="dark" :data="models.priceInfo">
            <el-table-column label="医保编码" prop="medicalCode" align="center" />
            <el-table-column label="项目编码" prop="projectNo" align="center" width="150" />
            <el-table-column label="支付方法" prop="payMethod" align="center" width="100" />
            <el-table-column label="项目名称" prop="name" align="center" />
            <!-- <el-table-column label="项目内涵" prop="description" align="center" :show-overflow-tooltip="true" /> -->

            <el-table-column label="计价单位" prop="unit" align="center" width="100" />
            <el-table-column label="收费标准" prop="charges" align="center" width="100" />
            <!-- <el-table-column label="限定内容" prop="restrictedContent" align="center" width="100" /> -->
            <el-table-column label="费用类别" prop="priceType" align="center" width="100" />
            <el-table-column label="国家医保编码" prop="gjMedicalCode" align="center" width="170" />
          </el-table>
        </div>
      </template>
    </template>
    <PriceDialog ref="priceDialogRef" @enterPrice="enterPrice" />
  </el-form-item>
</template>

<script>
import FmUpload from './Upload'
import FileUpload from './Upload/file'
import axios from 'axios'
import base from '@/utils/base64'
import PriceDialog from '@/views/xjsxxm/apply/components/price/index.vue'
import { getPriceNoInfo } from '@/api/xjs/tech'
export default {
  name: 'GenetateFormItem',
  components: {
    FmUpload,
    FileUpload,
    PriceDialog
  },
  /* eslint-disable */
  props: [
    "widget",
    "models",
    "propValue",
    "remote",
    "data",
    "disabled",
    "preview",
    "isLabel",
    "subformIndex",
    "subformModel"
  ],
  data() {
    return {
      Base64: new base(),
      bqOptions: [
        {
          "label": "一病区",
          "value": "一病区"
        },
        {
          "label": "二病区",
          "value": "二病区"
        },
        {
          "label": "三病区",
          "value": "三病区"
        },
        {
          "label": "四病区",
          "value": "四病区"
        },
        {
          "label": "五病区",
          "value": "五病区"
        },
        {
          "label": "六病区",
          "value": "六病区"
        },
        {
          "label": "八病区",
          "value": "八病区"
        },
        {
          "label": "九病区",
          "value": "九病区"
        },
        {
          "label": "十病区",
          "value": "十病区"
        },
        {
          "label": "十一病区",
          "value": "十一病区"
        },
        {
          "label": "十二病区",
          "value": "十二病区"
        },
        {
          "label": "十三病区",
          "value": "十三病区"
        },
        {
          "label": "十四病区",
          "value": "十四病区"
        },
        {
          "label": "十五病区",
          "value": "十五病区"
        },
        {
          "label": "十六病区",
          "value": "十六病区"
        },
        {
          "label": "十七病区",
          "value": "十七病区"
        },
        {
          "label": "其他病区",
          "value": "其他病区"
        }
      ],
      showStatus: true,
      disabledStatus: false,
      widgetLabelWidth: "",
      dataModel:
        this.subformIndex === undefined
          ? this.models[this.widget.model]
          : this.models[this.subformModel][this.subformIndex][
          this.widget.model
          ],
      tableData: [],
      otherModel: ""
    };
  },
  watch: {
    dataModel: {
      deep: true,
      handler(newValue) {
        if (newValue !== undefined && newValue !== null) {
          if (this.subformIndex !== undefined) {
            this.models[this.subformModel][this.subformIndex][
              this.widget.model
            ] = newValue;
            this.$emit("update:models", {
              ...this.models,
              [this.subformModel]: this.models[this.subformModel]
            });
            // this.$emit('input-change', val, this.widget.model, this.subformIndex)
          } else {

            this.models[this.widget.model] = newValue;
            this.$emit("update:models", {
              ...this.models,
              [this.widget.model]: newValue
            });
            // this.$emit('input-change', val, this.widget.model)
          }
        }
      }
    },
    models: {
      deep: true,
      handler(val) {
        if (val.status === undefined && val.status === null) {
          if (this.subformIndex === undefined) {
            this.dataModel = val[this.widget.model];
          } else {
            this.dataModel =
              val[this.subformModel][this.subformIndex][this.widget.model];
          }
        }
        delete this.models.status;
        this.handleDisplayVerifiy();
        this.handleDisableVerifiy();
      }
    }
  },
  created() {
    if (this.widget.type !== "cascader") {
      if (this.widget.options.remote === 99) {
        let headers = JSON.parse(this.widget.options.requestMethod.headers);
        headers["content-type"] = "application/json; charset=utf-8";

        let params = JSON.parse(this.widget.options.requestMethod.params);

        let axiosParams = {
          url: this.widget.options.requestMethod.url,
          method: this.widget.options.requestMethod.method,
          headers: headers
        };

        if (this.widget.options.requestMethod.method === "get") {
          axiosParams["params"] = params;
        } else if (this.widget.options.requestMethod.method === "post") {
          axiosParams["data"] = params;
        }

        axios(axiosParams)
          .then(resp => {
            let fields = [];
            if (this.widget.options.requestMethod.result) {
              fields = this.widget.options.requestMethod.result.split(".");
            } else {
              fields = ["data"];
            }

            let result = resp.data;
            for (let f of fields) {
              result = result[f];
            }
            this.widget.options.remoteOptions = result.map(item => {
              return {
                value: item[this.widget.options.props.value],
                label: item[this.widget.options.props.label]
              };
            });
          })
          .catch(err => {
            console.log(err);
          });
      }

      if (
        this.widget.options.remote !== 99 &&
        this.widget.options.remote &&
        this.remote[this.widget.options.remoteFunc]
      ) {
        this.remote[this.widget.options.remoteFunc](data => {
          if (this.widget.type !== "cascader") {
            this.widget.options.remoteOptions = data.map(item => {
              return {
                value: item[this.widget.options.props.value],
                label: item[this.widget.options.props.label],
                // children: item[this.widget.options.props.children]
                children: []
              };
            });
          }
        });
      }
    } else {
      this.remote[this.widget.options.remoteFunc](res => {
        this.widget.options.remoteOptions = res;
        this.cascaderChild(this.widget.options.remoteOptions);
      });
    }

    if (this.widget.type === "imgupload" && this.widget.options.isQiniu) {
      this.remote[this.widget.options.tokenFunc](data => {
        this.widget.options.token = data;
      });
    }

    if (this.disabled !== undefined && this.disabled !== null) {
      this.widget.options.disabled = this.disabled;
    }

    // label width
    if (this.widget.options.labelWidthDisabled) {
      this.widgetLabelWidth = this.widget.options.labelWidth;
    } else if (this.widget.type === "divider") {
      this.widgetLabelWidth = 0;
    } else {
      this.widgetLabelWidth = this.data.config.labelWidth;
    }

    this.handleDisplayVerifiy();
    this.handleDisableVerifiy();
  },
  methods: {
    checkBoxOtherInputChange(val) {
      if (this.widget.type == 'checkboxOther') {
        this.models[this.widget.otherModel] = val
      }
    },
    radioOtherInputChange(val) {
      if (this.widget.type == 'radioOther') {
        this.models[this.widget.otherModel] = val
      }
    },
    priceNoChange(val) {
      console.log(val);
      if (val.trim() == "") {
        this.models["priceInfo"] = [];
        this.models["showPriceTable"] = 0;
      }
      if (val.trim().length > 5) {
        getPriceNoInfo({ medicalCode: val }).then(response => {
          if (response.code == 200) {
            if (response.data.id > 0) {
              let priceList = [];
              priceList.push(response.data);
              this.models["priceInfo"] = priceList;
              this.models["showPriceTable"] = 1;
            }
          }
        });
      }
    },
    handleSearchPrice() {
      this.$refs.priceDialogRef.open();
    },
    enterPrice(priceInfo) {
      this.dataModel = priceInfo[0].medicalCode;
      this.models["priceInfo"] = priceInfo;
      this.models["showPriceTable"] = 1;
      console.log(priceInfo);
    },
    cascaderChild(options) {
      options.forEach(i => {
        if (i.children && i.children.length > 0) {
          this.cascaderChild(i.children);
        } else {
          i.children = null;
        }
      });
    },
    downLoadDoc(fileName, fileUrl) {
      var a = document.createElement("a");
      a.href = fileUrl;
      a.download = fileName;
      a.style.display = "none";
      document.body.appendChild(a);
      a.click();
      a.remove();
    },
    fileList(files) {
      this.dataModel = files;
    },
    handleDisplayVerifiy() {
      if (Object.keys(this.widget.options).indexOf("displayVerify") >= 0) {
        if (this.widget.options.displayVerify.type !== "hide") {
          var c = 0;
          for (var v of this.widget.options.displayVerify.list) {
            if (this.models[v.model].toString() === v.value) {
              c++;
            }
          }
          if (this.widget.options.displayVerify.type === "and") {
            if (c !== this.widget.options.displayVerify.list.length) {
              this.showStatus = false;
            } else {
              this.showStatus = true;
            }
          } else if (this.widget.options.displayVerify.type === "or") {
            if (c === 0) {
              this.showStatus = false;
            } else {
              this.showStatus = true;
            }
          }
        }
      }
    },
    handleDisableVerifiy() {
      if (Object.keys(this.widget.options).indexOf("disableVerify") >= 0) {
        if (this.widget.options.disableVerify.type !== "hide") {
          var c = 0;
          for (var v of this.widget.options.disableVerify.list) {
            if (this.models[v.model].length > 0) {
              c++;
            }
          }
          console.log(c)
          if (this.widget.options.disableVerify.type === "and") {
            if (c !== this.widget.options.disableVerify.list.length) {
              this.disabledStatus = false;
            } else {
              this.disabledStatus = true;
            }
          } else if (this.widget.options.disableVerify.type === "or") {
            if (c === 0) {
              this.disabledStatus = false;
            } else {
              this.disabledStatus = true;
            }
          }
        }
      }
    }
  }
};
</script>

<style>
.previewEditorDiv>p {
  margin: 0;
}

.preview-cascader-class .el-input.is-disabled .el-input__inner {
  background-color: #fff;
  border: none;
  color: #303133;
}

.preview-cascader-class .el-input.is-disabled .el-input__suffix .el-input__suffix-inner .el-input__icon.el-icon-arrow-down:before {
  content: "";
}

.line {
  height: 22px;
  width: 5px;
  background: #277fd6;
}

.header {
  background: #fff !important;
  padding: 8px 20px;
  border-bottom: 1px solid #ebeef5;
  height: 50px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
</style>
